<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>数据库连接驱动-添加</title>
  <link type="text/css" rel="stylesheet" th:href="@{${skinPath} + '/css.css'}" />
  <link href="index.css" rel="stylesheet" type="text/css">
  <script th:src="@{/inc/common.js}"></script>
  <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
  <script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
  <link rel="stylesheet" th:href="@{/js/bootstrap/css/bootstrap.min.css}" />
  <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}" media="all">
  <script th:src="@{/js/bootstrap/js/bootstrap.min.js}"></script>
  <link th:href="@{/js/select2/select2.css}" rel="stylesheet"/>
  <script th:src="@{/js/select2/select2.js}"></script>
  <link th:href="@{/js/jquery-showLoading/showLoading.css}" rel="stylesheet" media="screen"/>
  <script type="text/javascript" th:src="@{/js/jquery-showLoading/jquery.showLoading.js}"></script>
  <script th:src="@{/js/layui/layui.js}" charset="utf-8"></script>
  <script th:src="@{/js/jquery-alerts/jquery.alerts.js}" type="text/javascript"></script>
  <script th:src="@{/js/jquery-alerts/cws.alerts.js}" type="text/javascript"></script>
  <link th:href="@{/js/jquery-alerts/jquery.alerts.css}" rel="stylesheet" type="text/css" media="screen"/>
</head>
<script th:inline="javascript">
  $(function() {
    $("#oadb").find("option[value='[(${oadb})]']").attr("selected", true);
    changedb();
  });

  function changedb() {
    var index = $('#oadb').val();
    if (index == 'access') {
      $('#tr_ip').hide();
      $('#tr_port').hide();
      $('#tr_database').hide();
      $('#tr_conn').hide();
      $('#tr_path').show();
      $('#tr_drive').show();
    } else {
      $('#tr_ip').show();
      $('#tr_port').show();
      $('#tr_database').show();
      $('#tr_conn').show();
      $('#tr_path').hide();
      $('#tr_drive').hide();
    }
  }
</script>
<body>
<div class="spacerH"></div>
<form id="form1" name=form1 action="?op=setup" method="post" onsubmit="return form1_onsubmit()">
  <table id="t1" class="tabStyle_1 percent98" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="tabStyle_1_title" colspan=2>数据库配置</td>
    </tr>
    <tr>
      <td width="25%" height="24" align="right">&nbsp;</td>
      <td></td>
    </tr>
    <tr>
      <td height="24" align="right">名称</td>
      <td th:text="${dbSource}"><input id="name" name="name" th:value="${dbSource}" type="hidden" /></td>
    </tr>
    <tr>
      <td height="24" align="right">数据库类型</td>
      <td>
        <select id="oadb" name="oadb" onchange='changedb()'>
          <option value="">请选择数据库类型</option>
          <option value="access">Access</option>
          <option value="mysql">MySQL</option>
          <option value="mssql">SQLServer2000/2003</option>
          <option value="mssql_n">SQLServer2005+</option>
          <option value="oracle">Oracle</option>
          <option value="postgresql">PostGreSql</option>
        </select>
        <script th:inline="javascript">
          $('#oadb').val('[(${oadb})]');
        </script>
      </td>
    </tr>
    <tr id="tr_drive">
      <td height="24" align="right">ODBC驱动程序</td>
      <td><input id="odbcName" name="odbcName" style="width:500px;" th:value="${odbcName}"/></td>
    </tr>
    <tr id="tr_path">
      <td height="24" align="right">Access文件路径</td>
      <td><input id="path" name="path" style="width:500px;" th:value="${path}"/></td>
    </tr>
    <tr id="tr_ip">
      <td height="24" align="right">主机名</td>
      <td><input id="ip" name="ip" th:value="${ip}"/></td>
    </tr>
    <tr id="tr_port">
      <td height="24" align="right">端口号</td>
      <td><input id="port" name="port" th:value="${port}"/></td>
    </tr>
    <tr id="tr_database">
      <td height="24" align="right">数据库名</td>
      <td><input id="database" name="database" th:value="${database}"/></td>
    </tr>
    <tr id="tr_conn">
      <td height="24" align="right">最大连接数</td>
      <td><input id="max_conn" name="max_conn" th:value="${maximumConnectionCount}"/></td>
    </tr>
    <tr>
      <td height="24" align="right">用户名</td>
      <td><input id="user" name="user" th:value="${user}"/></td>
    </tr>
    <tr>
      <td height="24" align="right">密码</td>
      <td><input type="password" id="pwd" name="pwd" style="width:148px" th:value="${pwd}"/></td>
    </tr>
    <tr>
      <td colspan=2 align=center>
        <input type="submit" class="btn btn-default" value="测试连接并保存" />
      </td>
    </tr>
  </table>
</form>
</body>
<script th:inline="javascript">
  var connName = new LiveValidation('name');
  connName.add(Validate.Presence);
  var user = new LiveValidation('user');
  user.add(Validate.Presence);
  var pwd = new LiveValidation('pwd');
  pwd.add(Validate.Presence);

  function form1_onsubmit() {
    var params = $("#form1").serialize();
    $.ajax({
      type: "post",
      url: "dbConnEditBtn?" + params,
      data : {
        op : "setup"
      },
      dataType: "html",
      beforeSend: function(XMLHttpRequest){
        //  ShowLoading();
      },
      success: function(data, status){
        var r = $.parseJSON(data);
        if (r.ret=="1") {
          layer.alert(r.msg, function() {
            window.opener.location.reload();
            window.close();
          });
        }
        else {
          layer.alert(r.msg, "提示");
        }
      },
      complete: function(XMLHttpRequest, status){
        // HideLoading();
      },
      error: function(XMLHttpRequest, textStatus){
        // 请求出错处理
        alert(XMLHttpRequest.responseText);
      }
    });
    return false;
  }
</script>
</html>